<template>
  <el-card class="m-b-20">
    <el-form ref="site-config-form" :model="siteInfo" label-width="200px">
      <el-form-item label="审计日志状态" prop="system_audit_log_enable">
        <el-radio-group v-model="siteInfo.system_audit_log_enable">
          <el-radio-button label="true">启用</el-radio-button>
          <el-radio-button label="false">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="单点登陆状态" prop="system_auth_login_kick">
        <el-radio-group v-model="siteInfo.system_auth_login_kick">
          <el-radio-button label="true">启用</el-radio-button>
          <el-radio-button label="false">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="并发人数限制" prop="system_auth_token_maximum">
        <el-input-number v-model="siteInfo.system_auth_token_maximum" :min="1" />
      </el-form-item>
      <el-form-item label="数据变更日志开关" prop="system_modify_log_enable">
        <el-radio-group v-model="siteInfo.system_modify_log_enable">
          <el-radio-button label="true">启用</el-radio-button>
          <el-radio-button label="false">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="黑名单监控" prop="system_black_enable">
        <el-radio-group v-model="siteInfo.system_black_enable">
          <el-radio-button label="true">启用</el-radio-button>
          <el-radio-button label="false">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="黑名单监控规则">
        <el-row :gutter="10">
          <el-col :span="7" style="padding-left: 0px!important;">
            <el-input v-model="siteInfo.system_black_limit_time">
              <template slot="prepend">监控时长（秒）</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="siteInfo.system_black_limit_count">
              <template slot="prepend">限制次数</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="siteInfo.system_black_block_time">
              <template slot="prepend">锁定分钟</template>
            </el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="忽略限制攻击脚本请求" prop="xss_ignore_url">
        <el-input v-model="siteInfo.xss_exclude_url" type="textarea" rows="3" />
      </el-form-item>
      <el-form-item label="自定义非法参数" prop="xss_illegal_param">
        <el-tag
          v-for="param in xss_illegal_param_array"
          :key="param"
          closable
          :disable-transitions="false"
          class="m-l-5"
          @close="handleTagDelete(param)"
        >
          {{ param }}
        </el-tag>
        <el-input
          v-if="inputTagVisible"
          ref="saveTagInput"
          v-model="inputTagValue"
          class="input-new-tag m-l-10"
          @keyup.enter.native="handleTagConfirm"
          @blur="handleTagConfirm"
        />
        <el-button v-if="!inputTagVisible" class="button-new-tag" icon="el-icon-plus" @click="handleTagAdd" />
      </el-form-item>
      <el-form-item label="消息重推次数" prop="system_message_retry">
        <el-input-number v-model="siteInfo.system_message_retry" :min="0" />
      </el-form-item>
      <el-form-item label="验证码规则">
        <el-row :gutter="10" class="m-b-10">
          <el-col :span="7" style="padding-left: 0px!important;">
            <el-input v-model="siteInfo.kaptcha_type" autocomplete="off">
              <template slot="prepend">类型</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="siteInfo.kaptcha_img_width" autocomplete="off">
              <template slot="prepend">图片宽度</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="siteInfo.kaptcha_img_height" autocomplete="off">
              <template slot="prepend">图片高度</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="7" class="m-l-5" style="padding-left: 0px!important;">
            <el-input v-model="siteInfo.kaptcha_length" autocomplete="off">
              <template slot="prepend">字符个数</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="siteInfo.sms_kaptcha_length" autocomplete="off">
              <template slot="prepend">短信字符个数</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="siteInfo.client_ignore_validate" autocomplete="off">
              <template slot="prepend">无需验证码客户端</template>
            </el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="邮箱配置">
        <el-row :gutter="10">
          <el-col :span="7" style="padding-left: 0px!important;">
            <el-input v-model="siteInfo.mail_host" autocomplete="off">
              <template slot="prepend">主机</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="siteInfo.mail_from" autocomplete="off">
              <template slot="prepend">地址</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="siteInfo.mail_password" autocomplete="off">
              <template slot="prepend">密码</template>
            </el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="注册邮件验证">
        <el-row :gutter="10">
          <el-radio-group v-model="siteInfo.register_email_enable">
            <el-radio-button label="true">启用</el-radio-button>
            <el-radio-button label="false">禁用</el-radio-button>
          </el-radio-group>
        </el-row>
      </el-form-item>
      <el-form-item label="哀悼日开关">
        <el-row :gutter="10">
          <el-radio-group v-model="siteInfo.mourning">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-row>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button v-permission="['tool:site:edit']" type="primary" @click="saveConfig">保存</el-button>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import { siteSave } from '@/api/system/config'

export default {
  name: 'SiteConfig',
  props: {
    siteInfo: {
      type: Object,
      default: () => {
        return {
          system_audit_log_enable: false,
          system_auth_login_kick: true,
          system_auth_token_maximum: 1,
          system_modify_log_enable: true,
          system_black_enable: true,
          system_black_limit_time: undefined,
          system_black_limit_count: undefined,
          system_black_block_time: undefined,
          xss_exclude_url: undefined,
          xss_illegal_param: undefined,
          system_message_retry: 3,
          kaptcha_type: undefined,
          kaptcha_img_width: undefined,
          kaptcha_img_height: undefined,
          kaptcha_length: 4,
          sms_kaptcha_length: 4,
          client_ignore_validate: undefined,
          mail_host: undefined,
          mail_from: undefined,
          mail_password: undefined,
          register_email_enable: false,
          mourning: false
        }
      }
    }
  },
  watch: {
    'siteInfo.xss_illegal_param': {
      handler(value) {
        if (value) {
          this.xss_illegal_param_array = value.split(',')
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      xss_illegal_param_array: [],
      inputTagValue: undefined,
      inputTagVisible: false
    }
  },
  methods: {
    handleTagAdd() {
      this.inputTagVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleTagConfirm() {
      const inputValue = this.inputTagValue
      if (inputValue) {
        this.xss_illegal_param_array.push(inputValue)
      }
      this.inputTagVisible = false
      this.inputTagValue = ''
    },
    handleTagDelete(tag) {
      this.xss_illegal_param_array.splice(this.xss_illegal_param_array.indexOf(tag), 1)
    },
    saveConfig() {
      let param = {
        system_audit_log_enable: false,
        system_auth_login_kick: true,
        system_auth_token_maximum: 1,
        system_modify_log_enable: true,
        system_black_enable: true,
        system_black_limit_time: undefined,
        system_black_limit_count: undefined,
        system_black_block_time: undefined,
        xss_exclude_url: undefined,
        xss_illegal_param: undefined,
        system_message_retry: 3,
        kaptcha_type: undefined,
        kaptcha_img_width: undefined,
        kaptcha_img_height: undefined,
        kaptcha_length: 4,
        sms_kaptcha_length: 4,
        client_ignore_validate: undefined,
        mail_host: undefined,
        mail_from: undefined,
        mail_password: undefined,
        register_email_enable: false,
        mourning: false
      }
      param = this.$api.objectUpdate(param, this.siteInfo)

      if (this.xss_illegal_param_array.length > 0) {
        param.xss_illegal_param = this.xss_illegal_param_array.join(',')
      } else {
        param.xss_illegal_param = ''
      }

      siteSave(param).then(response => {
        this.$modal.msgSuccess(response.msg)
      }).catch(() => {})
    }
  }
}
</script>
